<template>
	<view class="two_main">
		<view class="main_left">
			<text class="one-txt-cut" :class="listIndex==index?'active':''" v-for="(item,index) in list" :key="index" @click="listBtn(index)">{{item.name}}</text>
		</view>
		<view class="main_right">
			<view class="right_nav">
				<scroll-view class="scroll-x" scroll-x="true">
					<view class="text" :class="navIndex==index?'active':''" v-for="(item,index) in navList" :key="index" @click="navBtn(index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="right_select">
				<view class="select" @click="selectShow=true">
					<text>{{selectTxt}}</text>
					<image src="@/static/images/xia_icon.jpg" mode=""></image>
				</view>
				<!-- <u-select v-model="selectShow" :list="selectList" @confirm='confirmBtn' confirm-color='#26C281'></u-select> -->
			</view>
			<view class="right_list">
				<view class="no_html" v-if="listGoods.length==0">
					<image src="@/static/images/no_img2.png" mode=""></image>
					<text>暂无商品信息</text>
				</view>
				<scroll-view v-else scroll-y="true" class="scroll-Y" @scrolltolower='scrolltolower'>
					<view class="list" v-for="(item,index) in listGoods" :key="index" @click="detailsBtn(item.id)">
						<view class="image">
							<image :src="item.image_text" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="name txt-cut">{{item.goods_name}}</view>
							<view class="money">
								<!-- <image src="@/static/images/details_icon1.jpg" mode=""></image> -->
								<text>￥{{item.price}}</text>
							</view>
						</view>
					</view>
					<view class="mall_loading">
						<u-loadmore :status="status" color='#999' />
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// list:{
			// 	type:Array,
			// 	default:[]
			// }
		},
		data() {
			return {
				type:1,
				keyword:'',
				// 
				listIndex:0,
				list:[],
				// 
				navIndex:0,
				// 
				selectTxt:'综合排序',
				selectType:'1',
				selectShow:false,
				selectList: [
					{
						value: '1',
						label: '综合排序',
					},
					{
						value: 'sales',
						label: '销量排序',
					},
					{
						value: 'popularity',
						label: '人气排序',
					},
					{
						value: 'price_max',
						label: '价格最高',
					},
					{
						value: 'price_min',
						label: '价格最低',
					}
				],
				//
				page:1,
				listGoods:[],
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
			};
		},
		computed:{
			navList(){
				if(this.list.length){
					if(this.list[this.listIndex].tow_cate && this.list[this.listIndex].tow_cate.length){
						return this.list[this.listIndex].tow_cate
					}else{
						return []
					}
				}else{
					return []
				}
			}
		},
		mounted() {},
		methods:{
			cateinfo(){
				var that = this
				that.$httpApi.goodsCate().then((res)=>{
					if(res.code==1){
						that.list=res.data
						that.goodsList()
					}
				})
			},
			goodsList(){
				var that = this
				if(that.page==1){
					that.$tips.showLoading('加载中')
				}else{
					that.status = 'loading'
				}
				var params = {
					type:that.type,
					category_id:that.navList[that.navIndex].id,
					key:that.keyword,
					orderdesc:that.selectType==1?'':that.selectType,
					page:that.page,
				}
				that.$httpApi.goodsIndex(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						if(that.page==1){
							that.listGoods=[]
							that.$tips.hideLoading()
						}
						if(res.data.current_page==res.data.last_page){
							that.status = 'nomore'
						}else{
							that.status = 'loadmore'
						}
						that.listGoods=that.listGoods.concat(res.data.data)
					}
				})
			},
			refresh(val,text){
				this.type=val
				this.keyword=text
				this.page=1
				this.listIndex=0
				this.navIndex=0
				this.cateinfo()
			},
			search(text){
				this.keyword=text
			},
			// 一级分类
			listBtn(index){
				this.listIndex=index
				this.navIndex=0
				this.page=1
				this.goodsList()
			},
			// 二级分类
			navBtn(index){
				this.navIndex=index
				this.page=1
				this.goodsList()
			},
			// 排序
			confirmBtn(arr){
				this.selectTxt=arr[0].label
				this.selectType=arr[0].value
				this.page=1
				this.goodsList()
			},
			// 滚动
			scrolltolower(){
				if(this.status=='nomore'){
					return
				}
				this.page++
				this.goodsList()
			},
			// 详情
			detailsBtn(val){
				uni.navigateTo({
					url:'/pages/mall/details_second?type='+this.type+'&id='+val
				})
			},
		}
	}
</script>

<style lang="less">
	.two_main{
		width: 100%;
		height: 100%;
		background: #fff;
		border-bottom: 1rpx solid #F7F8FA;
		display: flex;
		.main_left{
			width: 190rpx;
			height: 100%;
			overflow-y: auto;
			text{
				display: block;
				padding: 0 20rpx;
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				background: #F9F9F9;
			}
			.active{
				color: #26C281;
				border-left: 4rpx solid #26C281;
			}
		}
		.main_right{
			width: calc(100% - 190rpx);
			height: 100%;
			.right_nav{
				width: 100%;
				padding-left: 16rpx;
				margin-top: 32rpx;
				height: 56rpx;
				.scroll-x{
					width: 100%;
					height: 100%;
					white-space: nowrap;
				}
				.text{
					display: inline-block;
					padding: 0 20rpx;
					height: 56rpx;
					margin-right: 16rpx;
					line-height: 56rpx;
					text-align: center;
					background: rgba(153,153,153,0.1);
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.text:first-child{
					margin-left: 16rpx;
				}
				.active{
					color: #26C281;
					background: rgba(38,194,129,0.1);
				}
			}
			.right_select{
				width: 100%;
				padding-left: 32rpx;
				margin: 32rpx 0;
				height: 44rpx;
				display: flex;
				align-items: center;
				.select{
					display: flex;
					align-items: center;
					text{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						padding-right: 8rpx;
					}
					image{
						display: block;
						width: 30rpx;
						height: 30rpx;
						margin-top: 5rpx;
					}
				}
			}
			.right_list{
				width: 100%;
				height: calc(100% - 196rpx);
				.scroll-Y{
					width: 100%;
					height: 100%;
				}
				.list{
					width: 100%;
					padding:0 32rpx 32rpx;
					background: #fff;
					display: flex;
					.image{
						width: 168rpx;
						height: 168rpx;
						image{
							display: block;
							width: 100%;
							height: 100%;
							border-radius:10rpx;
						}
					}
					.info{
						width: calc(100% - 168rpx);
						padding-left: 16rpx;
						height: 168rpx;
						.name{
							width: 100%;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.money{
							width: 100%;
							padding-top: 20rpx;
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 35rpx;
								height: 35rpx;
							}
							text{
								padding-left: 6rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #FF6230;
							}
						}
					}
				}
			}
		}
	}
</style>
